<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>后台管理系统-首页</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./assets/bootstrap-validator/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="./assets/nprogress/nprogress.css" />
    <link rel="stylesheet" href="./css/categoryFirst.css" />
</head>

<body class="ad-body">
    <!--侧边栏-->
    <aside class="ad-aside">
        <!--logo-->
        <div class="ad-logo">
            <a href="javascript:;">ITCAST</a>
        </div>
        <!--用户-->
        <div class="ad-user">
            <img src="./images/default.png" alt="" />
            <span>超级管理员</span>
        </div>
        <!--菜单-->
        <div class="ad-menu">
            <ul>
                <li class="user-manage">
                    <a href="./userManage.html">
                        <span class="glyphicon glyphicon-user"></span> 用户管理</a>
                </li>
                <li class="ad-category">
                    <a href="javascript:;">
                        <span class="glyphicon glyphicon-list"></span> 分类管理</a>
                    <div class="child" style="display: none">
                        <a href="javascript:;">一级分类</a>
                        <a href="./categorySecond.html">二级分类</a>
                    </div>
                </li>
                <li class="pro-manage">
                    <a href="./productManage.html">
                        <span class="glyphicon glyphicon-tags"></span> 商品管理</a>
                </li>
            </ul>
        </div>
    </aside>
    <!--内容-->
    <section class="ad-section">
        <!--顶部导航-->
        <nav class="ad-nav clearfix">
            <a class="pull-left toggle-aside" data-menu href="javascript:;">
                <span class="glyphicon glyphicon-align-justify"></span>
            </a>
            <a data-toggle="modal" data-target="#loginOut" class="pull-right login-out" data-logout href="javascript:;">
                <span class="glyphicon glyphicon-log-out"></span>
            </a>
        </nav>
        <!-- 主体内容 -->
        <div class="ad-container">
            <!--路径导航-->
            <ol class="breadcrumb">
                <li>
                    <a href="#">管理系统</a>
                </li>
                <li>首页</li>
                <li class="active">一级分类</li>
            </ol>
            <!-- 图表部分 -->
            <div class="fir-content">
                <!-- 添加按钮 -->
                <button data-toggle="modal" data-target="#addFirst" class="add-catory btn btn-default">添加分类</button>
                <!-- 一级分类的表格 -->
                <table class="first-cat table table-bordered text-center">
                    <tr>
                        <th>序号</th>
                        <th>一级分类名称</th>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>运动馆</td>
                    </tr>
                </table>

                <!-- 分页器 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>
    </section>

    <!-- 退出登录的模态框 -->
    <!-- Modal -->
    <div class="modal fade" id="loginOut" tabindex="-1" role="dialog" aria-labelledby="loginOutLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title text-info" id="loginOutLabel">温馨提示</h4>
                </div>
                <div class="modal-body text-danger">
                    <span class="glyphicon glyphicon-info-sign"></span>
                    <span>您确定要退出后台管理系统吗？</span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="cancel-btn btn btn-primary" data-dismiss="modal">取消</button>
                    <button type="button" class="sure-btn btn btn-warning">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加一级分类的模态框 -->
    <!-- Modal -->
    <div class="modal fade" id="addFirst" tabindex="-1" role="dialog" aria-labelledby="addFirstLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="addFirstLabel">添加一级分类</h4>
                </div>
                <div class="modal-body">
                    <form id="fir-form">
                        <div class="form-grop">
                            <input type="text" class="form-control" id="categoryName" name="categoryName" placeholder="请输入一级分类名称">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button form="fir-form" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button form="fir-form" type="submit" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./assets/jquery/jquery.min.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/bootstrap-paginator/bootstrap-paginator.js"></script>
    <script src="./assets/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <script src="./assets/nprogress/nprogress.js"></script>
    <script src="./js/common.js"></script>
    <script src="js/categoryFirst.js"></script>
</body>

</html>